<template>
  <div>
    <!-- 这里就是右边渲染部分 -->
    <!-- 无数据时 -->
    <div
      v-if="directoryList.length === 0"
      style="height: 80vh;width:300px;"
      class="noData-2"
    >
      <div class="noData">
        <div class="noData-1">暂无数据</div>
      </div>
    </div>
    <div v-else>
      <div v-for="(moduleList, index) in directoryList" :key="index">
        <!-- 一级变量 -->
        <div>
          <h3 style="margin: 0px; margin-bottom: 20px">
            {{ moduleList.item_name }}
          </h3>
        </div>
        <!-- 二级变量 -->
        <div v-if="moduleList.second_item">
          <div
            class="wrap"
          >
            <div
              v-for="(twoVariable, twoIndex) in moduleList.second_item"
              :key="twoIndex"
              style="margin-bottom: 20px"
            >
              <div class="item-name">
                {{ twoVariable.item_name }}
              </div>
              <!-- 回答部分 -->
              <div
                v-if="twoVariable.question_lists"
                style="backgroundcolor: #fff"
                class="variable-container"
              >
                <div
                  v-for="answer in twoVariable.question_lists"
                  :key="answer.relation_question_id"
                  class="variable-container-line"
                  :class="{'variable-container-one':twoVariable.question_lists.length%2==0?false:true}"
                >
                  <div
                    class="wrap"
                  >
                    <!-- 等于0是变量组 -->
                    <div v-if="answer.question_type == 0" class="variable-container-table" style="height:auto;">
                      <!-- 名称 -->
                      <div class="name-align">{{ answer.question_name }}</div>
                      <div v-if="answer.child_question" style="width:70%;border-left:1px solid #cdcdcd;">
                        <div class="variable-container" style="margin:5px;">
                          <div
                            v-for="newchild in answer.child_question"
                            :key="newchild.question_id"
                            class="variable-container-line"
                            style="height:57px;width:50%;"
                            :class="{'variable-container-one':answer.child_question.length%2==0?false:true}"
                          >
                            <!-- 等于1是单选 -->
                            <div
                              v-if="newchild.question_type == 1"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div v-if="newchild.option_list" class="quetion-align">
                                <div
                                  v-for="list in newchild.option_list"
                                  :key="list.option_id"
                                >
                                  <el-radio
                                    v-model="list.question_id"
                                    disabled
                                    :label="list.question_name"
                                  >
                                    {{ list.option_name }}
                                  </el-radio>
                                </div>
                              </div>
                            </div>
                            <!-- 等于2是多选 -->
                            <div
                              v-else-if="newchild.question_type == 2"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div v-if="newchild.option_list" class="quetion-align">
                                <el-checkbox-group
                                  v-for="lists in newchild.option_list"
                                  :key="lists.option_id"
                                  v-model="newchild.question_id"
                                >
                                  <el-checkbox disabled :label="lists.question_id">
                                    {{ lists.option_name }}
                                  </el-checkbox>
                                </el-checkbox-group>
                              </div>
                            </div>
                            <!-- 等于3是下拉 -->
                            <div
                              v-else-if="newchild.question_type == 3"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div class="quetion-align">
                                <el-dropdown>
                                  <span class="el-dropdown-link">
                                    下拉菜单<i
                                      class="el-icon-arrow-down el-icon--right"
                                    />
                                  </span>
                                  <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>黄金糕</el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                              </div>
                            </div>
                            <!-- 等于4是附件上传 -->
                            <div
                              v-else-if="newchild.question_type == 4"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div class="quetion-align">
                                <el-upload
                                  class="upload-demo"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :before-remove="beforeRemove"
                                  multiple
                                  :limit="3"
                                  :on-exceed="handleExceed"
                                  :file-list="fileList"
                                />
                              </div>
                            </div>
                            <!-- 等于5是单行文本 -->
                            <div
                              v-else-if="newchild.question_type == 5"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div class="quetion-align">
                                <el-input
                                  v-model="newchild.create_type"
                                  disabled
                                  style="width: 150px"
                                />
                              </div>
                            </div>
                            <!-- 等于6是多行文本 -->
                            <div
                              v-else-if="newchild.question_type == 6"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div class="quetion-align">
                                <el-input
                                  disabled
                                  style="width: 60%;"
                                  placeholder="请输入内容"
                                />
                              </div>
                            </div>
                            <!-- 等于7是时间 -->
                            <div
                              v-else-if="newchild.question_type == 7"
                              class="variable-container-table"
                              style="height:auto;"
                            >
                              <div class="name-align">
                                {{ newchild.question_name }}
                              </div>
                              <div class="quetion-align">
                                <el-date-picker
                                  v-model="newchild.question_type"
                                  placeholder="选择日期时间"
                                />
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>
                    <!-- 等于1是单选 -->
                    <div
                      v-else-if="answer.question_type == 1"
                      class="variable-container-table"
                    >
                      <div
                        class="name-align"
                      >
                        {{ answer.question_name }}
                      </div>
                      <div v-if="answer.option_list" class="quetion-align">
                        <div
                          v-for="list in answer.option_list"
                          :key="list.option_id"
                        >
                          <el-radio
                            v-model="list.question_id"
                            disabled
                            :label="list.question_name"
                          >
                            {{ list.option_name }}
                          </el-radio>
                        </div>
                      </div>
                    </div>
                    <!-- 等于2是多选 -->
                    <div
                      v-else-if="answer.question_type == 2"
                      class="variable-container-table"
                    >
                      <div class="name-align">
                        {{ answer.question_name }}
                      </div>

                      <div v-if="answer.option_list" class="quetion-align">
                        <!-- <span v-for="lists in answer.option_list" :key="lists.option_id"> -->
                        <el-checkbox-group
                          v-for="lists in answer.option_list"
                          :key="lists.option_id"
                          v-model="answer.question_id"
                        >
                          <el-checkbox disabled :label="lists.question_id">
                            {{ lists.option_name }}
                          </el-checkbox>
                        </el-checkbox-group>
                      <!-- </span> -->
                      </div>
                    </div>
                    <!-- 等于3是下拉 -->
                    <div
                      v-else-if="answer.question_type == 3"
                      class="variable-container-table"
                    >
                      <div class="name-align">
                        {{ answer.question_name }}
                      </div>
                      <div v-if="answer.option_list" class="quetion-align">
                        <el-dropdown style="margin-left:10px;">
                          <span class="el-dropdown-link">
                            下拉菜单<i
                              class="el-icon-arrow-down el-icon--right"
                            />
                          </span>
                          <el-dropdown-menu
                            slot="dropdown"
                            class="wrap"
                            group="site"
                            animation="100"
                            drag-class="dragClass"
                            ghost-class="ghostClass"
                            chosen-class="chosenClass"
                            @start="onStart"
                            @end="onEnd"
                          >
                            <el-dropdown-item
                              v-for="lists in answer.option_list"
                              :key="lists.option_id"
                            >
                              {{ lists.option_name }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                    <!-- 等于4是附件上传 -->
                    <div
                      v-else-if="answer.question_type == 4"
                      class="variable-container-table"
                    >
                      <div class="name-align">
                        {{ answer.question_name }}
                      </div>
                      <div class="quetion-align">
                        <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="3"
                          :on-exceed="handleExceed"
                          :file-list="fileList"
                        />
                      </div>
                    </div>
                    <!-- 等于5是单行文本 -->
                    <div
                      v-else-if="answer.question_type == 5"
                      class="variable-container-table"
                    >
                      <div class="name-align">
                        {{ answer.question_name }}
                      </div>
                      <div class="quetion-align">
                        <!-- QID/姓名 -->
                        <el-input
                          disabled
                          placeholder="请输入内容"
                          style="width: 150px;margin-left:10px"
                        />
                      </div>
                    </div>
                    <!-- 等于6是多行文本 -->
                    <div
                      v-else-if="answer.question_type == 6"
                      class="variable-container-table"
                    >
                      <div class="name-align">
                        {{ answer.question_name }}
                      </div>
                      <div class="quetion-align">
                        <el-input
                          disabled
                          style="width: 150px;margin-left:10px"
                          placeholder="请输入内容"
                        />
                      </div>
                    </div>
                    <!-- 等于7是时间 -->
                    <div
                      v-else-if="answer.question_type == 7"
                      class="variable-container-table"
                    >
                      <div class="name-align">
                        {{ answer.question_name }}
                      </div>
                      <div class="quetion-align">
                        <div style="margin-left:10px;display:flex;align-items: center;">
                          <el-date-picker
                            v-model="answer.question_type"
                            disabled
                            placeholder="选择日期时间"
                          />
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  props: {
    directoryList: { type: Array, default: () => [] } // 这里就是用户点击目录传递过来的数据
  },
  data() {
    return {
      activeName: 'second',
      is_slect_item: false, // 模块和变量
      drag: false
    }
  },
  created() {},

  methods: {
    // 这里就是tab栏切换
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scope>
.noData {
  width: 150px;
  height: 150px;
  font-size: 16px;
  // position: relative;
  // left: 150px;
  // top: 150px;
}
.noData img {
  width: 120px;
  height: 120px;
}
.noData-1 {
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #cdcdcd;
}
.noData-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bgc_w_varid {
  position: relative;
  padding: 9px 15px;
  line-height: 20px;
  font-size: 14px;
}

.nameStyle {
  width: 20%;
  height: 100%;
  padding: 7% 0 0 5%;
  border-right: 1px solid #e6e6e6;
}
.nameStyles {
  width: 16%;
  height: 100%;
  padding: 4% 0 0 4%;
  border-right: 1px solid #e6e6e6;
}
.detailsStyle {
  flex: 1;
  padding-left: 2%;
}
.newVariable {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  // border: 1px solid #1a1;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.navthiss {
  height: 80vh;
  width: 15%;
  // background-color: #5cf;
  position: fixed;
  right: 1%;
  top: 110px;
  z-index: 99;
  border: 1px solid #cdcdcd;
  // border: 1px solid #1a1;
  background-color: #f7f7f7;
  .navthiss-header{
    margin:34px 0;
    display: flex;
    justify-content: center;
    .navthiss-header-select{
      color: red;
    }
  }
  .navthiss-content{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .navthiss-content-item{
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #cdcdcd;
    margin-bottom: 5px;
  }

}
// 表格样式
.variable-container {
  // border-bottom: 1px solid #e6e6e6;
  // border-right: 1px solid #e6e6e6;
  border-top: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
  display: flex;
  flex-wrap: wrap;
}
.variable-container-table{
  height:57px;
  width:100%;
  display: flex;
}
.name-align{
  width:30%;height:100%;line-height:57px;margin-left: 20px;

}
.quetion-align{
  width:70%;display:flex;align-items: center;
  border-left:1px solid #cdcdcd ;
  flex-wrap: wrap;
  padding-left: 5px;;
}
.variable-container-line{
  height: auto;width:50%;border-bottom:1px solid #cdcdcd;border-right:1px solid #cdcdcd;

}
.variable-container-one:last-child{
  width: 100% !important;
}
// 二级变量名
.item-name{

  border: 1px solid #cdcdcd;
  border-bottom: none;

}
.item-name{
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-weight: 600;
}
</style>
